<template>
    <div class="register">
        <div class="box-card">
            <div class="timeline">
                <el-steps :active="2" align-center finish-status="success">
                    <el-step title="企业注册"></el-step>
                    <el-step title="请填写企业信息"></el-step>
                    <el-step title="信息审核"></el-step>
                    <el-step title="审核完成"></el-step>
                </el-steps>
            </div>
            <div class="register-account">
                <!--:rules="formRules"-->
                <el-form :model="formData" :rules="formRules" ref="formRef" label-width="140px" label-position="right" show-message>
                    <div class="title"><span>填写企业信息</span></div>
                    <el-form-item label="企业名称" prop="company_name">
                        <el-input v-model="formData.company_name" placeholder="请输入企业名称">{{ formData.company_name }}</el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="contacts_name">
                        <el-input v-model="formData.contacts_name" placeholder="请输入联系人">{{ formData.contacts_name }}</el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="contacts_mobile">
                        <el-input v-model="formData.contacts_mobile" placeholder="请输入联系方式">{{ formData.contacts_mobile }}</el-input>
                    </el-form-item>
                    <el-form-item label="企业所在地" prop="full_address">
                        <el-select v-model="formData.province_id" placeholder="请选择省" @change="changeProvice(formData.province_id)">
                            <el-option v-for="option in province" :key="option.id" :label="option.name" :value="option.id">{{ option.name }}</el-option>
                        </el-select>
                        <el-select v-model="formData.city_id" placeholder="请选择市" @change="changeCity(formData.city_id)">
                            <el-option v-for="option in city" :key="option.id" :label="option.name" :value="option.id">{{ option.name }}</el-option>
                        </el-select>
                        <el-select v-model="formData.district_id" placeholder="请选择区/县" @change="changeDistrict(formData.district_id)">
                            <el-option v-for="option in district" :key="option.id" :label="option.name" :value="option.id">{{ option.name }}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公司详细地址" prop="address">
                        <el-input v-model="formData.address" placeholder="请输入公司详细地址">{{ formData.address }}</el-input>
                    </el-form-item>
                    <div class="title"><span>公司信息</span></div>
                    <!-- <el-form-item label="员工人数" prop="company_scale">
                        <el-select v-model="formData.company_scale" placeholder="请选择人数" @change="changeCompanyScale(formData.company_scale)">
                            <el-option v-for="option in options_company_size" :key="option.id" :label="option.name" :value="option.id">{{ option.name }}</el-option>
                        </el-select>
                    </el-form-item> -->

                    <el-form-item label="员工人数">
                      <el-select v-model="formData.company_scale" placeholder="请选择人数">
                        <el-option
                          v-for="option in options_company_size"
                          :key="option.id"
                          :label="option.name"
                          :value="option.id">
                        </el-option>
                      </el-select>
                    </el-form-item>



                    <el-form-item label="法人姓名" prop="legal_person_name">
                        <el-input v-model="formData.legal_person_name" placeholder="请输入法人姓名">{{ formData.contacts_name }}</el-input>
                    </el-form-item>
                    <el-form-item label="法人手机号" prop="legal_person_mobile">
                        <el-input v-model="formData.legal_person_mobile" placeholder="请输入法人手机号">{{ formData.legal_mobile }}</el-input>
                    </el-form-item>
                    <el-form-item label="法人身份证号" prop="card_no">
                        <el-input v-model="formData.card_no" placeholder="请输入法人身份证号">{{ formData.legal_idenNum }}</el-input>
                    </el-form-item>
                    <el-form-item label="身份证号照片" prop="card_electronic_front" class="img-form">
                        <div class="preview">
                            <!--<div class="title">头像预览</div>-->
                            <div class="content">
                                <!--完善个人信息资料，上传头像图片有助于您结识更多的朋友。-->
                                <br />
                                <!--头像最佳默认尺寸为120x120像素。-->
                            </div>
                        </div>
                        <el-upload :action="uploadActionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" class="upload">
                            <div class="img-wrap"><img style="height: 100%; align: center; vertical: middle" :src="$img(formData.card_electronic_front)" @error="formData.card_electronic_front = defaultHeadImage" /></div>
                            <div class="img_upload">点击上传身份证图片 <i class="el-icon-upload"></i></div>
                        </el-upload>

                        <!--<div class="btn"><el-button size="medium" type="primary" @click="uploadHeadImg">保存</el-button></div>-->
                    </el-form-item>
                    <el-form-item label="身份证号照片反面" prop="card_electronic_back" class="img-form">
                        <div class="preview">
                            <!--<div class="title">头像预览</div>-->
                            <div class="content">
                                <!--完善个人信息资料，上传头像图片有助于您结识更多的朋友。-->
                                <br />
                                <!--头像最佳默认尺寸为120x120像素。-->
                            </div>
                        </div>
                        <el-upload :action="uploadActionUrl1" :show-file-list="false" :on-success="handleAvatarSuccess1" class="upload">
                            <div class="img-wrap"><img style="height: 100%; align: center; vertical: middle" :src="$img(formData.card_electronic_back)" @error="formData.card_electronic_back = defaultHeadImage" /></div>
                            <div class="img_upload">点击上传身份证图片 <i class="el-icon-upload"></i></div>
                        </el-upload>

                        <!--<div class="btn"><el-button size="medium" type="primary" @click="uploadHeadImg">保存</el-button></div>-->
                    </el-form-item>

                    <div class="title"><span>营业执照信息</span></div>
                     <!-- prop="business_licence_number" -->
                    <el-form-item label="营业执照号">
                        <el-input v-model="formData.business_licence_number" placeholder="请输入营业执照号">{{ formData.business_licence_number }}</el-input>
                    </el-form-item>
                    <el-form-item label="营业执照照片" prop="business_licence_number_electronic" class="img-form">
                        <div class="preview">
                            <!--<div class="title">头像预览</div>-->
                            <div class="content">
                                <!--完善个人信息资料，上传头像图片有助于您结识更多的朋友。-->
                                <br />
                                <!--头像最佳默认尺寸为120x120像素。-->
                            </div>
                        </div>
                        <el-upload :action="uploadActionUrl2" :show-file-list="false" :on-success="handleAvatarSuccess2" class="upload">
                            <div class="img-wrap"><img style="height: 100%; align: center; vertical: middle" :src="$img(formData.business_licence_number_electronic)" @error="formData.business_licence_number_electronic = defaultGoodImage" /></div>
                            <div class="img_upload">点击上传营业执照照片 <i class="el-icon-upload"></i></div>
                        </el-upload>

                        <!--<div class="btn"><el-button size="medium" type="primary" @click="uploadHeadImg">保存</el-button></div>-->
                    </el-form-item>
                </el-form>
                <el-button @click="register">提交</el-button>
            </div>
            <el-dialog :title="agreement.title" :visible.sync="aggrementVisible" width="60%" :before-close="aggrementClose" :lock-scroll="false" center>
                <div v-html="agreement.content" class="xyContent"></div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { addressInfo, saveAddress} from "@/api/member/member"
import { getArea } from "@/api/address"
import { mapGetters } from "vuex"
import Config from "@/utils/config"
import { getRegisiterAggrement, register, registerConfig, enterpriseCert, memberInfo, memberDetail } from "@/api/auth/register"
import { captcha } from "@/api/website"
export default {
    name: "authentication",
    components: {},
    data() {
        // 联系方式校验规则
        var contacts_mobileValidata = function (rule, value, callback) {
            var reg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
            if (value == "") {
                return callback(new Error("联系方式不能为空！！！"))
            } else if (!reg.test(value)) {
                return callback(new Error("你的联系方式格式不正确"))
            }
        }

        // 企业所在地校验规则
        var company_addressValidata = function (rule, value, callback) {
            //console.log(typeof(value))
            if (value == "") {
                return callback(new Error("请选择企业所在地"))
            }
        }

        var business_licence_numberValidata = function (rule, value, callback) {
            var reg = /^[0-9]*[1-9][0-9]*$/
            if (value == "") {
                return callback(new Error("请填写营业执照号"))
            } else if (!reg.test(value)) {
                return callback(new Error("请填写正确类型的营业执照号"))
            }
        }
        let self = this
        var fullAddress = (rule, value, callback) => {
            if (self.formData.province_id) {
                if (self.formData.city_id) {
                    if (self.formData.district_id) {
                        return callback()
                    } else {
                        return callback(new Error("请选择区/县"))
                    }
                } else {
                    return callback(new Error("请选择市"))
                }
            } else {
                return callback(new Error("请选择省"))
            }
        }
        var addressValidata = (rule, value, callback) => {
            if (value == "") {
                return callback(new Error("请填写详细地址"))
            }
        }
        return {
            formData: {
                company_name: "",
                province_id: "",
                city_id: "",
                district_id: "",
                province_name: "",
                city_name: "",
                district_name: "",
                address: "",
                contacts_name: "",
                contacts_mobile: "",
                legal_person_name: "",
                legal_person_mobile: "",
                card_no: "",
                card_electronic_front: "",
                card_electronic_back: "",
                business_licence_number: "",
                business_licence_number_electronic: "",
                company_scale: 0,
                full_address: ""
            },
            addressValue: "",
            flag: false, //防重复标识
            province: [],
            city: [],
            district: [],
            pickerValueArray: [],
            multiIndex: [0, 0, 0],
            isInitMultiArray: false,
            // 是否加载完默认地区
            isLoadDefaultAreas: false,
            loading: true,
            yes: true,
            // formData: {
            //     company_name: "", //企业名称
            //     business_licence_number: "", //组织结构代码
            //     legal_person: "", //企业法人
            //     register_time: "", //注册时间
            //     register_money: "", //注册资金
            //     company_size: "", //公司人数
            //     annual_turnover: "", //年营业额
            //     company_address: "", //公司地址
            //     company_full_address: "", //公司详细地址
            //     bank_name: "", //开户行
            //     bank_account_name: "", //开户名
            //     bank_account_number: "", //开户账号
            //     main_products: "", //主营产品
            //     business_sphere: "", //营业范围
            //     business_licence_number_electronic: "", //营业执照
            //     other_information: "", //其它资料
            //     company_province_id: "", //省市区
            //     company_city_id: "",
            //     company_district_id: "",
            //     enterprise_prove: "", //在职证明
            //     business_licence_number: "", //营业执照号
            //     purchase_name: "", //采购商名称
            //     contacts_name: "", //姓名
            //     contacts_sex: 1, //性别
            //     contacts_department: "", //部门
            //     contacts_job: "", //职务
            //     contacts_mobile: "", //联系方式
            //     contacts_name: "", //法人姓名
            //     legal_mobile: "", //法人联系方式
            //     legal_idenNum: "", //法人身份证号
            //     card_electronic_front: "", //身份证号前面照片
            //     card_electronic_back: "", //身份证号反面照片
            //     contacts_person: "", //联系人
            //     province_name: "",
            //     city_name: "",
            //     district_name: ""
            // },
            formRules: {
                company_name: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur"
                    }
                ],
                contacts_name: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur"
                    }
                ],
                full_address: [{ required: true, validator: fullAddress, trigger: "blur" }],
                contacts_mobile: [
                    {
                        required: true,
                        type: Number,
                        validator: contacts_mobileValidata,
                        trigger: "blur"
                    }
                ],
                address: [
                    {
                        required: true,
                        message: "请填写公司详细地址",
                        trigger: "blur"
                    }
                ],
                // business_licence_number: [
                //     {
                //         required: true,
                //         type: Number,
                //         validator: business_licence_numberValidata,
                //         trigger: "blur"
                //     }
                // ]
            },
            ischecked: false,
            agreement: "",
            // fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
            aggrementVisible: false,
            defaultRegions: [],
            imgUrl: "",
            imgUrl1: "",
            imgUrl2: "",
            captcha: {
                // 验证码
                id: "",
                img: ""
            },
            uploadActionUrl: Config.baseUrl + "/api/upload/headimg",
            uploadActionUrl1: Config.baseUrl + "/api/upload/headimg",
            uploadActionUrl2: Config.baseUrl + "/api/upload/headimg",
            options_company_size: [
                {
                    id: 1,
                    name: "0-19人",
                    label: "0-19人"
                },
                {
                    id: 2,
                    name: "20-49人",
                    label: "20-49人"
                },
                {
                    id: 3,
                    name: "50-99人",
                    label: "50-99人"
                },
                {
                    id: 4,
                    name: "100-499人",
                    label: "100-499人"
                },
                {
                    id: 5,
                    name: "500-999人",
                    label: "500-999人"
                },
                {
                    id: 6,
                    name: "1000人以上",
                    label: "1000人以上"
                }
            ],
            registerConfig: {},
            // 0个人用户，1企业用户
            flag: 0,
            options: []
        }
    },
    mounted() {
			let self = this;
			setTimeout(function() {
				self.yes = false
			}, 300)
		},
    created() {
        this.formData.id = this.$route.query.id
        this.getCode()
        this.regisiterAggrement()
        this.getRegisterConfig()
        this.getMemberInfo()
        this.getMemberDetail()
        this.getAddressDetail()
        this.getDefaultAreas(0, {
            level: 0
        })
        //this.getAddressInfo();
    },
    methods: {
        getAddressInfo() {
          addressInfo()
            .then((res) => {
              console.log(res)
            })
            .catch((err)=>{
              console.log(err)
            })
        },
        getMemberDetail() {
            memberDetail()
                .then((res) => {
                    console.log(res.data, "hahaha")
                    if (res.data && res.code == 0) {
                        console.log(res.data)
                        this.formData.company_name = res.data.company_name
                        this.formData.province_id = res.data.province_id
                        this.formData.city_id = res.data.city_id
                        this.formData.district_id = res.data.district_id
                        this.formData.province_name = res.data.province_name
                        this.formData.city_name = res.data.city_name
                        this.formData.district_name = res.data.district_name
                        this.formData.address = res.data.address
                        this.formData.contacts_name = res.data.contacts_name
                        this.formData.contacts_mobile = res.data.contacts_mobile
                        this.formData.legal_person_name = res.data.legal_person_name
                        this.formData.legal_person_mobile = res.data.legal_person_mobile
                        this.formData.card_no = res.data.card_no
                        this.formData.card_electronic_front = res.data.card_electronic_front
                        this.formData.card_electronic_back = res.data.card_electronic_back
                        this.formData.business_licence_number = res.data.business_licence_number
                        this.formData.business_licence_number_electronic = res.data.business_licence_number_electronic
                        this.formData.company_scale = res.data.company_scale
                        console.log(this.formData.company_scale)

                        this.defaultRegions = [res.data.province_id, res.data.city_id, res.data.district_id];
                    } else {
                        this.$message.error(err.message)
                    }
                })
                .catch((err) => {
                    console.log(err.message)
                })
        },
        getMemberInfo() {
            memberInfo()
                .then((res) => {
                    if (res.code == 0) {
                        //console.log(res)
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        check() {
            this.ischecked = !this.ischecked
        },
        toLogin() {
            this.$router.push("/login")
        },
        switch1(e) {
            console.log(e)
            this.flag = e
            console.log(this.flag)
        },
        //  获取注册配置
        getRegisterConfig() {
            registerConfig()
                .then((res) => {
                    if (res.code >= 0) {
                        this.registerConfig = res.data.value
                        if (this.registerConfig.is_enable != 1) {
                            this.$message({
                                message: "平台未启用注册",
                                type: "warning",
                                duration: 2000,
                                onClose: () => {
                                    this.$router.push("/")
                                }
                            })
                        }
                    }
                })
                .catch((err) => {
                    console.log(err.message)
                })
        },
        //验证规则
        verify() {
            var reg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
            var idcard_reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
            if (this.formData.company_name == "" || this.formData.company_name == undefined) {
                this.$message({
                    message: "请输入企业名称",
                    type: "warning"
                })
                return false
            }
            console.log(1111)
            if (this.formData.contacts_name == "" || this.formData.contacts_name == undefined) {
                this.$message({
                    message: "请输入联系人",
                    type: "warning"
                })
                return false
            }
            var reg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
            if (this.formData.contacts_mobile == "") {
                this.$message({
                    message: "请输入联系电话",
                    type: "warning"
                })
                return false
            } else if (!reg.test(this.formData.contacts_mobile)) {
                this.$message({
                    message: "请输入正确格式的联系电话",
                    type: "warning"
                })
                return false
            }

            if(this.formData.province_id == '' || this.formData.province_id == undefined) {
                this.$message({
                    message: "请选择企业所在地",
                    type: "warning"
                })
                return false
            }
            // if(typeof(this.formData.company_scale)!==Number) {
            // 	this.$message({
            // 		message: '请选择所在地区',
            // 		type: 'warning',
            // 	})
            // 	return false;
            // }
            if (this.formData.address == "" || this.formData.address == undefined) {
                this.$message({
                    message: "请填写详细地址",
                    type: "warning"
                })
                return false
            }

            if (this.formData.legal_person_mobile !== "" && this.formData.legal_person_mobile !== undefined) {
                if (!reg.test(this.formData.legal_person_mobile)) {
                    this.$message({
                        message: "法人手机号不合法",
                        type: "warning"
                    })
                    return false
                }
            }
            if (this.formData.card_no !== "" && this.formData.card_no !== undefined) {
                if (!idcard_reg.test(this.formData.card_no)) {
                    this.$message({
                        message: "您的身份证号不合法",
                        type: "warning"
                    })
                    return false
                }
            }
            if (this.formData.card_no !== "" && this.formData.card_no !== undefined) {
                if (!idcard_reg.test(this.formData.card_no)) {
                    this.$message({
                        message: "您的身份证号不合法",
                        type: "warning"
                    })
                    return false
                }
            }
            var regss = /^[0-9]*[1-9][0-9]*$/    
            // if(this.formData.business_licence_number !== "" && this.formData.business_licence_number == undefined ) {
                   
            //     this.$message({
            //         message: "请输入您的营业执照号",
            //         type: "warning"
            //     })
            //     return false
            // }else if(!regss.test(this.formData.business_licence_number)){
            //     this.$message({
            //         message: "请填写正确类型的营业执照号",
            //         type: "warning"
            //     })
            //     return false
            // }
            return true
        },
        // 注册
        register() {
            //console.log(1111)
            var data = this.formData
            console.log(data)
            var self = this
            if(this.verify()) {
                 enterpriseCert(data)
                    .then((res) => {
                        console.log(res)
                        this.$router.push("/audit")
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
            // this.$refs.formRef.validate(valid => {
            //     if(valid) {
                   
            //     }else {
            //         return false;
            //     }
            // })
           
        },
        aggrementClose() {
            this.aggrementVisible = false
        },
        // 获取协议
        regisiterAggrement() {
            getRegisiterAggrement()
                .then((res) => {
                    if (res.code >= 0) {
                        this.agreement = res.data
                    }
                })
                .catch((err) => {
                    console.log(err.message)
                })
        },
        getAggrement() {
            this.aggrementVisible = true
        },
        // 获取验证码
        getCode() {
            captcha({
                captcha_id: "this.captcha.id"
            })
                .then((res) => {
                    if (res.code >= 0) {
                        this.captcha = res.data
                        this.captcha.img = this.captcha.img.replace(/\r\n/g, "")
                    }
                })
                .catch((err) => {
                    this.$message.error(err.message)
                })
        },
        ///Element组件里面的方法
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePreview(file) {
            console.log(file)
        },
        handleChange(value) {
            console.log(value)
            this.formData.company_scale
        },
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.imgUrl = res.data.pic_path
            //this.formData.card_electronic_front = URL.createObjectURL(file.raw)
            this.formData.card_electronic_front = res.data.pic_path
        },
        handleAvatarSuccess1(res, file) {
            console.log(res);
            this.imgUrl1 = res.data.pic_path
            this.formData.card_electronic_back = res.data.pic_path
        },
        handleAvatarSuccess2(res, file) {
            console.log(res);
            this.imgUrl2 = res.data.pic_path
            this.formData.business_licence_number_electronic = res.data.pic_path
        },

        uploadHeadImg() {
            headImg({ headimg: this.imgUrl })
                .then((res) => {
                    if (res.code == 0) {
                        this.$message({ message: "头像修改成功", type: "success" })
                        this.$store.dispatch("member/member_detail", { refresh: 1 })
                    }
                })
                .catch((err) => {
                    this.$message.error(err.message)
                })
        },
        changeCompanyScale(id) {
            // id = this.options_company_size[id].name;
            // this.formData.company_scale = name;
        },
        /**
         * 改变省
         */
        changeProvice(id) {
            this.getAreas(id, (data) => (this.city = data))
            let obj = {}
            obj = this.province.find((item) => {
                //这里的province就是上面遍历的数据源
                return item.id === id //筛选出匹配数据
            })
            this.formData.city_id = ""
            this.formData.district_id = ""
            this.formData.province_name = obj.name
            this.formData.full_address = obj.name // 设置选中的地址
        },
        /**
         * 改变市
         */
        changeCity(id) {
            this.getAreas(id, (data) => (this.district = data))
            let obj = {}
            obj = this.city.find((item) => {
                //这里的province就是上面遍历的数据源
                return item.id === id //筛选出匹配数据
            })
            this.formData.district_id = ""
            this.formData.city_name = obj.name
            this.formData.full_address = this.formData.full_address + "-" + obj.name
        },
        /**
         * 改变区
         */
        changeDistrict(id) {
            let obj = {}
            obj = this.district.find((item) => {
                //这里的province就是上面遍历的数据源
                return item.id === id //筛选出匹配数据
            })
            this.formData.district_name = obj.name
            this.formData.full_address = this.formData.full_address + "-" + obj.name
        },
        /**
         * 获取地址信息
         */
        getAddressDetail() {
            addressInfo({
                id: this.formData.id
            })
                .then((res) => {
                    let data = res.data
                    if (data != null) {
                        this.formData.name = data.name
                        this.formData.mobile = data.mobile
                        this.formData.telephone = data.telephone
                        this.formData.address = data.address
                        this.formData.full_address = data.full_address
                        this.formData.latitude = data.latitude
                        this.formData.longitude = data.longitude
                        this.formData.is_default = data.is_default
                        this.formData.province_id = data.province_id
                        this.formData.city_id = data.city_id
                        this.formData.district_id = data.district_id
                        this.defaultRegions = [data.province_id, data.city_id, data.district_id]
                    }
                })
                .catch((err) => {})
        },
        // 异步获取地区
        getAreas(pid, callback) {
            getArea({
                pid: pid
            })
                .then((res) => {
                    if (res.code == 0) {
                        var data = []
                        res.data.forEach((item, index) => {
                            data.push(item)
                        })
                        if (callback) callback(data)
                    }
                })
                .catch((err) => {})
        },

        /**
         * 获取省市区列表
         */
        getDefaultAreas(pid, obj) {
            getArea({
                pid: pid
            })
                .then((res) => {
                    if (res.code == 0) {
                        var data = []
                        var selected = undefined
                        res.data.forEach((item, index) => {
                            if (obj != undefined) {
                                if (obj.level == 0 && obj.province_id != undefined) {
                                    selected = obj.province_id
                                } else if (obj.level == 1 && obj.city_id != undefined) {
                                    selected = obj.city_id
                                } else if (obj.level == 2 && obj.district_id != undefined) {
                                    selected = obj.district_id
                                }
                            }

                            if (selected == undefined && index == 0) {
                                selected = item.id
                            }
                            data.push(item)
                        })

                        this.pickerValueArray[obj.level] = data
                        if (obj.level + 1 < 3) {
                            obj.level++
                            this.getDefaultAreas(selected, obj)
                        } else {
                            this.isInitMultiArray = true
                            this.isLoadDefaultAreas = true
                        }

                        this.province = this.pickerValueArray[0]
                    }
                    this.loading = false
                })
                .catch((err) => {
                    this.loading = false
                })
        },

        /**
         * 渲染默认值
         */
        handleDefaultRegions() {
            var time = setInterval(() => {
                if (!this.isLoadDefaultAreas) return
                this.isInitMultiArray = false

      
                for (let i = 0; i < this.defaultRegions.length; i++) {
                    for (let j = 0; j < this.pickerValueArray[i].length; j++) {
                        this.province = this.pickerValueArray[0]

                        // 匹配省
                        if (this.defaultRegions[i] == this.pickerValueArray[i][j].id) {
                            // 设置选中省
                            this.$set(this.multiIndex, i, j)

                            // 查询市
                            this.getAreas(this.pickerValueArray[i][j].id, (data) => {
                                this.city = data

                                for (let k = 0; k < this.city.length; k++) {
                                    if (this.defaultRegions[1] == this.city[k].id) {
                                        // 设置选中市
                                        console.log("设置选中市")
                                        console.log(this.multiIndex)
                                        this.$set(this.multiIndex, 1, k)
                                        // 查询区县
                                        this.getAreas(this.city[k].id, (data) => {
                                            this.district = data

                                            // 设置选中区县
                                            for (let u = 0; u < this.district.length; u++) {
                                                if (this.defaultRegions[2] == this.district[u].id) {
                                                    this.$set(this.multiIndex, 2, u)
                                                    this.handleValueChange({
                                                        detail: {
                                                            value: [j, k, u]
                                                        }
                                                    })
                                                    break
                                                }
                                            }
                                        })

                                        break
                                    }
                                }
                            })
                        }
                    }
                }
                if (this.isLoadDefaultAreas) clearInterval(time)
            }, 100)
        },
        handleValueChange(e) {
            // 结构赋值
            let [index0, index1, index2] = e.detail.value
            let [arr0, arr1, arr2] = this.pickedArr
            let address = [arr0[index0], arr1[index1], arr2[index2]]

            this.formData.full_address = ""
            for (let i = 0; i < address.length; i++) {
                if (this.formData.full_address) {
                    this.formData.full_address = this.formData.full_address + "-" + address[i].name
                } else {
                    this.formData.full_address = this.formData.full_address + address[i].name
                }
            }
        }
    },
    computed: {
        ...mapGetters(["defaultHeadImage"]),
        pickedArr() {
            // 进行初始化
            if (this.isInitMultiArray) {
                return [this.pickerValueArray[0], this.pickerValueArray[1], this.pickerValueArray[2]]
            }
            return [this.pickerValueArray[0], this.city, this.district]
        }
    },
    watch: {
        defaultRegions: {
            handler(arr, oldArr = []) {
                // 避免传的是字面量的时候重复触发
                if (arr.length !== 3 || arr.join("") === oldArr.join("")) return
                this.handleDefaultRegions()
            },
            immediate: true
        }
    }
}
</script>
<style lang="scss" scoped>
.register {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.img-form {
    position: relative;

    .preview {
        position: absolute;

    }
}

.box-card {
    width: 600px;
    margin: 0 auto;
    display: flex;
    background-color: #ffffff;
    padding: 0 30px 30px 30px;
    flex-direction: column;
    .register-title {
        cursor: pointer;
        border-bottom: 1px solid #f1f1f1;
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        color: $base-color;
        padding: 10px 0;
    }
    .register-account {
        margin-top: 50px;
        width: 100%;
        text-align: center;


        .title {
            width: 200px;
            height: 100px;
            line-height: 100px;
            span {
                padding-left: 5px;
                border-left: 2px solid #ff547b;
                font-size: 16px;
                color:#000;
                font-weight: 600;
            }
        }

        .img-wrap {
            //background-color: pink;
            border: 1px solid #ff547b;
            box-sizing: border-box;
            width: 300px;
            height: 110px;
            overflow: hidden;
        }
    }
    .code {
        width: 80%;
        text-align: left;
    }
    .el-form {
        margin: 0 30px;
        .captcha {
            vertical-align: top;
            max-width: inherit;
            max-height: 38px;
            line-height: 38px;
            cursor: pointer;
        }
        .img_upload {
            background: #ff547b;
            width: 300px;
            border-radius: 0 0 10px 10px;
            // margin: 10px 0;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            text-align: center;
        }
    }
    .xyContent {
        height: 600px;
        overflow-y: scroll;
    }
    .xy {
        margin-left: 110px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        margin-right: 30px;
        .toLogin {
            cursor: pointer;
        }
        .xy-wrap {
            display: flex;
            align-items: center;
            font-size: $ns-font-size-base;
            cursor: pointer;
            .iconfont {
                display: flex;
                align-content: center;
            }
            .content {
                margin-left: 3px;
                b {
                    color: $base-color;
                }
            }
        }
        .iconxuanze-duoxuan {
            color: $base-color;
        }
    }
    .el-button {
        margin-top: 20px;
        background-color: $base-color;
        color: #ffffff;
        width: calc(100% - 60px);
    }
}

.box-card .register-account {
    text-align: left !important;
}

.el-select {
    width: 130px;
}
</style>